<template>

  <div id="teamUpdatePage">
    <van-form @submit="doUpdateTeam">
      <van-cell-group inset>
        <van-field
            v-model="updateTeamData.name"
            name="name"
            required
            label="队伍名"
            placeholder="给队伍换个好听的名字"
            :rules="[{ required: true, message: '别忘了起队伍名' }]"
        />
        <van-field
            v-model="updateTeamData.description"
            rows="2"
            autosize
            label="队伍描述"
            type="textarea"
            placeholder="介绍一下你的队伍吧"
        />
        <van-divider>
          <van-highlight :keywords="keywordsOne" :source-string="textOne" id="keywordsUpdateFontSize"/>
          <van-highlight :keywords="keywordsTwo" :source-string="textTwo" id="keywordsUpdateFontSize"/>
        </van-divider>
        <van-field
            is-link
            readonly
            required
            name="datetimePicker"
            label="过期时间"
            :placeholder="result ?? '点击设置队伍过期时间'"
            @click="showPicker = true"
        />
        <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
          <van-date-picker
              v-model="updateTeamData.expireTime"
              :model-value="pickerValue"
              title="上下拖动选择时间"
              @confirm="onConfirm"
              @cancel="onCancel"
              :min-date="minDate"
          />
        </van-popup>
        <van-field name="radio" required label="队伍状态">
          <template #input>
            <van-radio-group v-model="updateTeamData.status" direction="horizontal">
              <van-radio name="0">公开</van-radio>
              <van-radio name="2">加密</van-radio>
              <van-radio name="1">私有</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
            v-if="updateTeamData.status === '2'"
            v-model="updateTeamData.password"
            type="password"
            name="userPassword"
            label="队伍密码"
            placeholder="设置队伍密码"
            :rules="[{ required: true, message: '加密队伍必须要有密码！' }]"
        />
      </van-cell-group>
      <div style="margin: 16px;" id="updateTeamTwoButton">
        <van-button round block type="primary" @click="cancelUpdateTeam">
          取消更新
        </van-button>
        <van-button round block type="primary" native-type="submit">
          更新队伍
        </van-button>
      </div>
    </van-form>

  </div>
</template>

<script setup lang="ts">

import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios.ts";
import {showFailToast, showSuccessToast, showToast} from "vant";
import moment from "moment";

const router = useRouter();
const route = useRoute();

const id = route.query.id;

// 用于更新的队伍
const updateTeamData = ref({});

// 更新队伍过期时间提醒
const textOne = '旧过期时间：';
const keywordsOne = '旧过期时间：';
const textTwo = ref();
const keywordsTwo = ref();

// 新队伍默认值
const initFormData = {
  "name": "",
  "description": "",
  "expireTime": null, // 默认不过期
  "maxNum": 3, // 默认最大人数3
  "password": "",
  "status": 0, // 默认公开队伍
}

// 进入更新队伍页面 首次加载要更新队伍的旧信息
onMounted(async () => {
  if(id <= 0) {
    showFailToast('获取更新队伍错误 更新失败');
    router.back();
  }
  const res = await myAxios.get('/team/get', {
    params: {
      id: id,
    }
  });
  if (res?.code === 0){
    updateTeamData.value = res.data;
    const oldExpireTime = moment(updateTeamData.value.expireTime).format("YYYY-MM-DD");
    textTwo.value = oldExpireTime;
    keywordsTwo.value = oldExpireTime;
  } else {
    router.back();
    showFailToast('获取队伍数据失败 系统错误');
  }
});



// 日期选择器
const minDate = new Date();
const showPicker = ref(false);
const result = ref();
const pickerValue = ref([]);
const onConfirm = ({ selectedValues }) => {
  result.value = selectedValues.join('/');
  initFormData.expireTime = selectedValues.join("-");
  pickerValue.value = selectedValues;
  showPicker.value = false;
};
const onCancel = () => {
  result.value = null;
  showPicker.value = false;
};

/**
 * 更新队伍
 * @returns {Promise<void>}
 */
const doUpdateTeam = async () => {
  const postData = {
    ...updateTeamData.value,
    status: Number(updateTeamData.value.status),
    expireTime: moment(initFormData.expireTime).format("YYYY-MM-DD"),
  }
  const res = await myAxios.post("/team/update", postData)
  if(res?.code === 0 && res.data) {
    showSuccessToast('更新队伍成功');
    router.back();
  } else {
    showFailToast('更新队伍失败');
  }
}

/**
 * 取消更新队伍
 */
const cancelUpdateTeam = () => {
    router.back();
    showToast('取消更新队伍')
}

</script>


<style scoped>
#updateTeamTwoButton {
  display: flex;
  justify-content: center;
}
#keywordsUpdateFontSize {
  font-size: 17px;
}
</style>